import * as React from 'react'
import { Link } from 'react-router-dom'
import { Carousel } from 'antd-mobile'
import { NavBar, Icon, Gird, Image, Item, FlatList, Button, Progress } from 'components'
import moment from 'moment'
import { TabBarView } from '../../viewComponent'
import './index.less'
import { post, formatPriceStr, showPhone } from '../../utils'

const colors: string[] = ['#fa4140', '#ff5b28', '#ff7427', '#b224d1', '#ea2888', '#b224d1', '#842aff', '#7d89ff', '#4f96ff', '#15badf', '#09d8bd']
const bgColors: string[] = ['#ffd5d5', '#ffc0ac', '#ffd7bf', '#ffb5da', '#f3baff', '#dbc0ff', '#bfc5ff', '#c2dbff', '#b5f1ff', '#c3ffa9', '#9afff2']
export default class BuyBeans extends React.Component<any, any> {

    public state = {
        newData: [],
        disData: [],
        logData: []
    }

    public render(): JSX.Element {
        const { newData, logData, disData } = this.state
        const { userInfo } = this.props
        return (
            <div className="buy_beeans">
                <NavBar
                    className="buy_beeans__bar"
                    title="买豆"
                    right={<Icon type="more" />}
                    fixed={true}
                    divider={false}
                    distance={300}
                    moveBgColor="255,255,255"
                />
                <div className="buy_beeans_header">
                    <img src={require('../../assets/buyBeans.jpg')} />
                    <div className="buy_beeans_header__my">
                        {this.getHeader(userInfo.id)}
                    </div>
                    <div className="buy_beeans_header_draws flex_justify">
                        <div className="flex">
                            <img className="notice" src={require('../../assets/msg_notice.png')} />
                            <Carousel
                                className="flex_1 "
                                vertical={true}
                                dots={false}
                                autoplay={true}
                                infinite={true}
                                autoplayInterval={2000}
                            >
                                {
                                    logData.map((item: any, index: number) => {
                                        return (
                                            <div className="flex" key={index}>
                                                <div className="flex_1 label">{showPhone(item.shop_user_name)} 购买了 {item.gmprice} 颗恒豆</div>
                                                <div className="time">{moment(item.pay_time).format('HH:mm')}</div>
                                            </div>
                                        )
                                    })
                                }
                            </Carousel>
                        </div>
                    </div>
                </div>
                <Gird className="buy_beeans_gird">
                    <div className="buy_beeans_gird__list flex">
                        <div className="flex_1">
                            <Link to="/beans_list">
                                <Image src={require('../../assets/prefe.png')} />
                                <div>恒豆特惠</div>
                            </Link>
                        </div>
                        <div className="flex_1">
                            <Link to="/beans_list">
                                <Image src={require('../../assets/newfe.png')} />
                                <div>最新转让</div>
                            </Link>
                        </div>
                        <div className="flex_1">
                            <Link to="/My/saleBeans">
                                <Image src={require('../../assets/moneyfe.png')} />
                                <div>出售恒豆</div>
                            </Link>
                        </div>
                        <div className="flex_1">
                            <Link to="/My/myBeans">
                                <Image src={require('../../assets/beanfe.png')} />
                                <div>我的恒豆</div>
                            </Link>
                        </div>
                    </div>
                    <Image className="advert" src={require('../../assets/advert.png')} />
                </Gird>
                <div className="buy_beeans_item">
                    <Gird style={{ marginTop: '0.5rem' }}>
                        <Item className="buy_beeans_item__title divider" title="特惠专区" value="查看全部" link="/beans_list" />
                        <FlatList
                            data={disData}
                            className="flex buy_beeans_item_dis"
                            renderItem={(data: any, index: number) => {
                                if (index === 0) {
                                    return (
                                        <Link to={`/beans_order/${data.id}`} className="flex_1" key={index}>
                                            <div className="tab view_1" key={index}>
                                                <div className="discount flex_center">
                                                    <div>恒豆<span>{data.discount}</span>折</div>
                                                </div>
                                                <div className="info">
                                                    <div>恒豆数量：<span className="DINPro">{data.buy_amount}</span></div>
                                                    <div>折扣价： <span className="DINPro">¥{(Number(data.buy_amount) * Number(data.discount) / 10).toFixed(2)}</span></div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                }
                                if (index === 1) {
                                    return (
                                        <Link to={`/beans_order/${data.id}`} className="flex_1" key={index}>
                                            <div className="tab view_2 flex_1" >
                                                <div className="discount flex_center">
                                                    <div>恒豆<span>{data.discount}</span>折</div>
                                                </div>
                                                <div className="info">
                                                    <div>恒豆数量：<span className="DINPro">{data.buy_amount}</span></div>
                                                    <div>折扣价：<span className="DINPro">¥ {(Number(data.buy_amount) * Number(data.discount) / 10).toFixed(2)}</span></div>
                                                </div>
                                            </div>
                                        </Link>
                                    )
                                }
                                return <div key={index} />
                            }}
                        />
                    </Gird>
                </div>
                <div className="buy_beeans_item">
                    <Gird style={{ paddingBottom: '0.6rem' }}>
                        <Item className="buy_beeans_item__title divider" title="最新转让" value="查看全部" link="/new_beans_list" />
                        <FlatList
                            data={newData}
                            renderItem={(data: any, index: number) => {
                                const num = ((Number(data.amount) - Number(data.buy_amount)) / Number(data.amount) * 100).toFixed(0)
                                return (
                                    <div className="buy_beeans_item_voucher flex" key={index}>
                                        <div className={`zhekou flex_center bg_${Math.round(data.discount) + 1}`}>
                                            <div>
                                                <div className="daze"><span className="DINPro">{data.discount}</span>折</div>
                                                <div className="label">恒豆折扣数</div>
                                            </div>
                                        </div>
                                        <div className="flex_1">
                                            <div className="info">
                                                <div className="number">恒豆数量：<span className="DINPro">{data.amount}</span></div>
                                                <div className="jine">折扣金额：<span className="DINPro">¥ {Number(data.amount) * Number(data.discount) / 10}</span></div>
                                                <div className="time">发布时间：{data.create_time && moment(data.create_time).format('YYYY-MM-DD')}</div>
                                            </div>
                                        </div>
                                        <div className="pros">
                                            <Progress
                                                className="flex_center"
                                                type="dashboard"
                                                size={52}
                                                value={Number(num)}
                                                bgColor={bgColors[Math.round(data.discount)]}
                                                progColor={colors[Math.round(data.discount)]}
                                                extend={<div className="pro" style={{ color: colors[Math.round(data.discount) - 1] }}><div className="pro_label">已抢</div><div className="pro_number">{num}%</div></div>}
                                            />
                                            <Link to={`/beans_order/${data.id}`}>
                                                <Button className={`btn btn_${Math.round(data.discount)  + 1}`}>立即购买</Button>
                                            </Link>
                                        </div>
                                    </div>
                                )
                            }}
                        />
                    </Gird>
                </div>
                <TabBarView select="hd" />
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    private getHeader(id: string) {
        if (id) {
            const { userInfo } = this.props
            return (
                <React.Fragment>
                    <div className="title">我的恒豆</div>
                    <div className="number flex_center">{formatPriceStr(userInfo.bean || '0')}</div>
                </React.Fragment>
            )
        } else {
            return (
                <Link to="/loginMode">
                    <div className="flex_center" style={{ fontSize: '0.8rem', color: '#fff', marginTop: '1rem' }}>请登录/注册</div>
                </Link>
            )
        }
    }

    private getData() {
        const { userInfo, SET_USER_INFO } = this.props
        if (userInfo.id) {
            post('usersapi/userBean', {
                userId: userInfo.id
            }).then((data: any) => {
                SET_USER_INFO({
                    ...userInfo,
                    ...data
                })
            })
        }
        post('beanapi/beanSafe', {
            by: 'discount',
            sort: 'ASC'
        }).then((data: any) => {
            this.setState({
                disData: data.data
            })
        })
        post('beanapi/beanList', {
            by: 'create_time',
            size: 2
        }).then((data: any) => {
            this.setState({
                newData: data.data
            })
        })
        post('beanapi/beanOrderLog').then((data: any) => {
            this.setState({
                logData: data
            })
        })
    }
}